<template>
	<view>


		<view class="goods_c">
			<view class="type_text">
				服务
			</view>
			<view class="item_r" @click="open">
				<view class="item_text service">
					<view class="item" v-for="(item, index) in service" :key="index">
						{{ item.name }}
					</view>
				</view>
				<text class="iconfont fr icon-xiayiyeqianjinchakangengduo"></text>
			</view>
		</view>




		<u-popup :show="show" :round="10" mode="bottom" @close="close" :closeable="true">
			<view class="services">
				<view class="title">商城小程序服务说明</view>
				<view class="services_box">
					<view class="item" v-for="(item, index) in service" :key="index">
						<view class="t_title">
							{{ item.name }}
						</view>
						<view class="content">{{ item.summary }}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义 props
	const props = defineProps({
		service: {
			type: Array,
			required: true, // 根据需要设置为 required
		},
	});

	// 定义响应式状态
	const show = ref(false);

	// 打开弹窗的方法
	const open = () => {
		show.value = true;
	};

	// 关闭弹窗的方法
	const close = () => {
		show.value = false;
	};
</script>

<style lang="scss" scoped>
@import '@/static/css/goods_components.scss';

.services {
	padding: 80rpx 50rpx 80rpx;

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		padding-bottom: 50rpx;
	}

	.services_box {
		padding-top: 40rpx;

		.item {
			padding-bottom: 50rpx;
			overflow: hidden;

			.t_title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;

				.iconfont {
					margin-right: 20rpx;
					float: left;
					margin-top: 4rpx;
				}
			}

			.content {
				font-size: 24rpx;
				color: #777;
				padding-top: 15rpx;
			}
		}
	}
}
</style>